<template>
	<view class="container">
		<u-skeleton rows="9" :loading="false" :title="false"  :rowsWidth="[260,690,690,260,690,690,260,690,690]" :rowsHeight="[20,50,80,20,50,80,20,50,80]">
			<view class="list">
				<view class="everPost" v-for="(item, index) in postList" :key="index" @click="seePost(item.id)">
					<view class="userInfo" >
						<view class="avatar">
							<image :src="userAvatar" mode="aspectFill"></image>
						</view>
						<view class="other">
							<view class="nickname">
								{{userName}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
					</view>
					
					<view class="title">
						{{item.title}}
					</view>
					<view class="content">
						{{item.summary}}
					</view>
					<u-album v-if="item.cover.length != 0" class="cover" :urls="item.cover" :maxCount="3" :multipleSize="180" space="13" @click.native.stop="previewImg(item.cover)"></u-album>
				</view>
				
			</view>
		</u-skeleton>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				userName:this.$store.state.loginUser.userBaseInfo.nickname,
				userAvatar:this.$store.state.loginUser.userBaseInfo.avatar,
				loading:false,
				postList:[
					{
						id: 0,
						avatar:'',
						nickname:'',
						time:'2021-2-23',
						title:'影视作品推荐',
						summary:'这是一条测试帖子',
						cover:[
							"https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
							"https://i1.hdslb.com/bfs/archive/a458ecf36ce5ad1b0f696d19ef93ac7a713660c1.jpg",
							"https://img2.baidu.com/it/u=3687842729,3134101122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888",
							"https://img2.baidu.com/it/u=3687842729,3134101122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888",
							"https://img2.baidu.com/it/u=3687842729,3134101122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888"
						],
						interaction:{
							like: 10,
							comment: 10
						}
					},
					{
						id: 1,
						avatar:'',
						nickname:'',
						time:'2021-2-23',
						title:'如何评价以下三部作品？',
						summary:'fuasghjshfSOFBsuifbijBFIUShbfoNF发顺丰护法你偶数部分亚比放技能催办i回复哈佛农夫我恢复好发范佛非农被否非农is和工富哦ifoh广佛不够狠够你做个还不我阿高回报噗啊哈港旁边',
						cover:[
							"https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
							"https://i1.hdslb.com/bfs/archive/a458ecf36ce5ad1b0f696d19ef93ac7a713660c1.jpg",
							"https://img2.baidu.com/it/u=3687842729,3134101122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888"
						],
						interaction:{
							like: 10,
							comment: 10
						}
					},
					{
						id: 2,
						avatar:'',
						nickname:'油专测试贴',
						time:'2021-2-23',
						title:'油专测试贴',
						summary:'fuasghjshfSOFBsuifbijBFIUShbfoNF发顺丰护法你偶数部分亚比放技能催办i回复哈佛农夫我恢复好发范佛非农被否非农is和工富哦ifoh广佛不够狠够你做个还不我阿高回报噗啊哈港旁边',
						cover:[],
						interaction:{
							like: 10,
							comment: 10
						}
					}
				]
				
			}
		},
		methods:{
			init(){
				uni.request({
					url:'',
					method:'GET',
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				}).then(res => {
					console.log(res)
				})
			},
			previewImg(img){			
				uni.previewImage({
					urls:[img]
				})
			},
			seePost(id){
				uni.navigateTo({
					url:'/pages/components/postDetail?id='+id,
					// success:() => {
					// 	console.log("跳转成功")
					// }
				})
				// uni.request({
				// 	url:'',
				// 	method:'GET',
				// 	header:{
				// 		xdzn_token:this.$store.state.loginUser.token
				// 	}
				// }).then(res => {
				// 	console.log(res)
				// })
			}
		},
		onLoad() {
			
		}
	}
</script>

<style scoped>
	.container{
		width: 100vw !important;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		margin: 0 auto;
	}
	.list{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.everPost{
		width: 100%;
		min-height: 260upx;
		border-bottom: 1upx solid rgba(229, 229, 229, 1.0);
		padding-left: 50upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 50upx;
		padding-top: 20upx;
		padding-bottom: 60upx;
	}
	.userInfo{
		height: 90upx;
		width: 100%;
	}
	.avatar{
		width: 80rpx !important;
		height: 80rpx !important;
		border-radius: 50%;
		border: 2rpx solid white;
		box-shadow: 2rpx 4rpx 10rpx rgba(229, 229, 229, 0.3);
		background-color: aqua;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.avatar>image{
		width: 80rpx;
		height: 80rpx;
	}
	.other{
		height: 90upx;
		width: 150upx;
		position: relative;
		top: -80rpx;
		left: 90rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.other>.nickname{
		width: 150upx;
		height: 55upx;
		font-size: 1rem;
		font-weight: 300;
	}
	.other>.time{
		width: 150upx;
		height: 25upx;
		font-size: 0.75rem;
		color: darkgrey;
		position: relative;
		top: -10upx;
	}
	.title{
		position: relative;
		width: 80%;
		left: 20upx;
		height: 30upx;
		font-weight: bold;
	}
	.content{
		width: 80%;
		position: relative;
		top: 60upx;
		display: -webkit-box;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		font-size: 0.85rem;
		overflow: hidden;
		margin-left: 34upx;
		top: 15upx;
		color: rgba(157, 157, 157, 1.0);
	}
	::v-deep .cover{
		position: relative;
		top: 40upx;
		border-radius: 20upx;
		overflow: hidden;
	}
</style>